<script setup lang="ts">
import InfoContainer from "./InfoContainer.vue";
import { TheBarChart, TheStackedLineChart } from "./Chart";
import { chartResults } from "./interface";
const props = withDefaults(defineProps<chartResults>(), {
  headerNames: () => ["基准训练方法", "优化训练方法"],
  header: () => ["基准训练方法", "优化训练方法"],
  chartSelect: () => [0, 1],
  chartData: () => [
    {
      title: "响应时间",
      legend: ["Email", "Union Ads"],
      xAxisName: "时序",
      xAxisData: ["20", "80", "120", "160", "200"],
      seriesData: [
        {
          name: "Email",
          type: "line",
          data: [1.7, 1.5, 2.1, 1.8, 2.3],
          symbol: "none", // 设置标记点形状为无
          showSymbol: false // 不显示标记点
        },
        {
          name: "Union Ads",
          type: "line",
          data: [2.1, 2.3, 1.6, 1.85, 2.1],
          symbol: "none", // 设置标记点形状为无
          showSymbol: false // 不显示标记点
        }
      ]
    },
    {
      title: "",
      legend: ["平均响应时间(s)"],
      yAxisData: ["基准处理方法", "优化处理方法"],
      seriesData: [5.2, 3.5]
    }
  ],
  result: "优化训练方法比基准训练方法在相同准确率下至少节省30%的资源开销"
});
</script>

<template>
  <InfoContainer>
    <el-container>
      <el-header v-if="props.header.length != 0" class="chart-header">
        <el-row class="chart-header-row">
          <el-col :span="7" class="chart-header-name">
            {{ props.headerNames[0] }}
          </el-col>
          <el-col :span="16" class="chart-header-content">
            {{ props.header[0] }}
          </el-col>
        </el-row>
        <el-row class="chart-header-row">
          <el-col :span="7" class="chart-header-name">
            {{ props.headerNames[1] }}
          </el-col>
          <el-col :span="16" class="chart-header-content">
            {{ props.header[1] }}
          </el-col>
        </el-row>
      </el-header>
      <el-main class="chart-main">
        <TheStackedLineChart
          v-if="props.chartSelect[0] == 0"
          :class="[
            'the-stacked-line-chart',
            props.header.length == 0 ? 'bigger-height' : 'normal-height'
          ]"
          :title="chartData[0].title"
          :legend="chartData[0].legend"
          :xAxisName="chartData[0].xAxisName"
          :xAxisData="chartData[0].xAxisData"
          :yAxisSetting="chartData[0].yAxisSetting"
          :seriesData="chartData[0].seriesData"
        />
        <TheBarChart
          v-if="props.chartSelect[0] == 1"
          :class="[
            'the-bar-chart',
            props.header.length == 0 ? 'bigger-height' : 'normal-height'
          ]"
          :title="chartData[0].title"
          :legend="chartData[0].legend"
          :xAxisSetting="chartData[0].xAxisSetting"
          :yAxisData="chartData[0].yAxisData"
          :seriesData="chartData[0].seriesData"
        />
        <TheStackedLineChart
          v-if="props.chartSelect[1] == 0"
          :class="[
            'the-stacked-line-chart',
            props.header.length == 0 ? 'bigger-height' : 'normal-height'
          ]"
          :title="chartData[1].title"
          :legend="chartData[1].legend"
          :xAxisName="chartData[1].xAxisName"
          :xAxisData="chartData[1].xAxisData"
          :yAxisSetting="chartData[1].yAxisSetting"
          :seriesData="chartData[1].seriesData"
        />
        <TheBarChart
          v-if="props.chartSelect[1] == 1"
          :class="[
            'the-bar-chart',
            props.header.length == 0 ? 'bigger-height' : 'normal-height'
          ]"
          :title="chartData[1].title"
          :legend="chartData[1].legend"
          :xAxisSetting="chartData[1].xAxisSetting"
          :yAxisData="chartData[1].yAxisData"
          :seriesData="chartData[1].seriesData"
        />
      </el-main>
      <el-footer class="chart-footer">
        <el-row class="chart-footer-header">结果</el-row>
        <el-row class="chart-footer-content">
          {{ props.result }}
        </el-row>
      </el-footer>
    </el-container>
  </InfoContainer>
</template>
<style lang="scss" scoped>
@mixin flex_col() {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}
.chart-header {
  height: 10vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  padding: 0;
  border-radius: 10px;

  .chart-header-row {
    justify-content: space-between;
  }
  .chart-header-content {
    @include flex_col;
    height: 4.5vh;
    background-color: rgb(242 243 245);
    border-radius: 4px;
  }
  .chart-header-name {
    @include flex_col;
    font-weight: bold;
  }
}

.chart-main {
  padding: 0;

  .the-stacked-line-chart,
  .the-bar-chart {
    overflow: hidden;
  }
}

.chart-footer {
  padding: 0;
  .chart-footer-header {
    font-weight: bold;
    padding-left: 2vh;
    padding-bottom: 1vh;
    font-size: 16;
  }
  .chart-footer-content {
    background-color: rgb(242 243 245);
    border-radius: 10px;
    height: 6vh;
    padding-left: 2vh;
    display: flex;
    align-items: center;
  }
}
.bigger-height {
  height: 40vh;
}
.normal-height {
  height: 35vh;
}
</style>
